<template>
  <div class="dataview">
    <el-card class="top">
      <div class="area">
        <div class="item">
          <div class="circle">{{ obj.increment_users }}</div>
          <span>今日新增用户</span>
        </div>
        <div class="item">
          <div class="circle">{{ obj.total_users }}</div>
          <span>总用户量</span>
        </div>
        <div class="item">
          <div class="circle">{{ obj.increment_questions }}</div>
          <span>新增试题</span>
        </div>
        <div class="item">
          <div class="circle">{{ obj.total_questions }}</div>
          <span>总试题量</span>
        </div>
        <div class="item">
          <div class="circle">{{ obj.total_done_questions }}</div>
          <span>总刷题量</span>
        </div>
        <div class="item">
          <div class="circle">{{ obj.personal_questions }}</div>
          <span>人均刷题量</span>
        </div>
      </div>
    </el-card>
    <el-card class="bottom">
      <div id="chart"></div>
    </el-card>
  </div>
</template>

<script>
import { getDataAPI, getDataStatisticsAPI } from '@/api/dataview'
export default {
  data () {
    return {
      obj: {},
      list: [] // echarts数据
    }
  },
  created () {
    this.getData()
  },
  async mounted () {
    await this.getEchartsData()
    this.echarts()
  },
  methods: {
    async getData () {
      const res = await getDataAPI()
      this.obj = res.data
      // console.log(res)
    },
    async getEchartsData () {
      const res2 = await getDataStatisticsAPI()
      this.list = res2.data.map(item => {
        return {
          value: item.value,
          name: item.name
        }
      })
      // console.log(this.list)
    },
    echarts () {
      // 基于准备好的dom，初始化echarts实例
      const myChart = this.$echarts.init(
        document.getElementById('chart'),
        null,
        {
          height: 300
        }
      )
      // 绘制图表
      const option = {
        title: {
          text: '企业题目数据统计',
          left: '5%'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)',
          backgroundColor: 'rgba(50,50,50,0.7)',
          borderColor: 'rgba(50,50,50,0.7)',
          textStyle: {
            color: '#fff'
          }
        },
        legend: {
          top: '5%',
          orient: 'vertical',
          right: '20%'
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: ['70%', '90%'],
            center: ['50%', '50%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '40',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: this.list
          }
        ]
      }
      option && myChart.setOption(option)
    }
  }
}
</script>

<style lang="scss" scoped>
.dataview {
  padding: 10px;
  .top {
    .area {
      display: flex;
      justify-content: space-around;
      .item {
        .circle {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 100px;
          height: 100px;
          border: 2px solid #008000;
          border-radius: 50%;
          margin-bottom: 10px;
        }
      }
    }
  }
}
</style>
